<template>
	<view class="centerbox">
		<view class="rechTop">
			<view class="imgTitele flex">
				<image src="/static/images/toptitleImage.png"></image>
			</view>
		</view>
		<view class="viewTab">
			<wd-tabs v-model="activeTab" @change="handleChange">
				<block v-for="item in tabs" :key="item">
					<wd-tab :title="`${item}`">
						<view v-if="dataList.length === 0" class="empty-message">
							<text>暂无优惠券</text>
						</view>
						<view class="CardBox" v-else v-for="coupon in dataList" :key="coupon.id"  :class="{ 'expired-card': coupon.status === 2 || coupon.status === 3}">
							<view class="flex">
								<view class="statusbar">
									<span>{{getStatusText(coupon.status)}}</span>
								</view>
								<view class="topright">
									<span>优惠券编号：{{ coupon.coupon_code }}</span>
								</view>
							</view>
							<view class="Neirone">
								<view class="Neirone_left">
									<text>{{ coupon.name }}</text>
									<view class="ulTitle">
										<ul>
											<li>有效期至{{ formatToChineseDateTime(coupon.expire_time) }}</li>
											<li>使用门店：{{ coupon.available_shop }}</li>
										</ul>
									</view>
								</view>
								<view class="Neirone_right">
									<view class="many" v-if="coupon.discount_type==0">
										<span>$</span>
										<span class="sptitle">{{ coupon.amount }}</span>
										<view class="manjian">满{{ coupon.min_spend }}可用</view>
									</view>
									<view class="many" v-if="coupon.discount_type==1">
										<span style="font-size: 60rpx;">{{ coupon.discount / 10 }}</span>
										<span>折</span>
									</view>
								</view>
							</view>
							<view class="inerratic">
								<view class="iner_top">
									<view>
										<span style="font-size: 25rpx;" @click="showtip(coupon.coupon_code)">使用规则</span>
										<img src="/static/images/updard.png" alt=""
											:class="['arrow', { 'rotate': activeCouponId === coupon.coupon_code }]" />
									</view>
									<wd-button plain size="small" custom-class="custom-shadow" :disabled="coupon.used" @click="handUsed">
										{{ coupon.used ? '已使用' : '立即使用' }}
									</wd-button>
								</view>
								<view class="content" :class="{ 'expanded': activeCouponId === coupon.coupon_code }">
									<p v-for="(rule, index) in coupon.rules" :key="index">{{ rule }}</p>
								</view>
							</view>
						</view>
					</wd-tab>
				</block>
			</wd-tabs>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted } from 'vue'
	import { httpPost } from '@/utils/http'
	import { useUserStore } from '@/store'
	import formatToChineseDateTime from '@/utils/format/formatChineseDate'
	const userStore = useUserStore()
	const dataList = ref([]);
	const activeTab = ref(0);
	const tabs = ref(['已购方案', '未使用', '已使用']);

	onMounted(() => {
		fetchCouponsByStatus();
	});
	const handUsed=()=>{
		uni.navigateTo({
			url: '/pages/Payment/index',
		})
	}
	// 切换 tab 时触发请求
	const handleChange = (event) => {
		activeTab.value = event.index;
		fetchCouponsByStatus(); // 发起请求
	};
	const getStatusText = (status) => {
		switch (status) {
			case 0: return '正在使用';
			case 1: return '未使用';
			case 2: return '已过期';
			case 3: return '已使用';
		}
	}
	// 根据状态获取优惠券
	const fetchCouponsByStatus = async () => {
		try {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			const statusMap = [0, 1, 2];
			const status = statusMap[activeTab.value];
			const response = await httpPost(
				'/miniapp/user_coupons/',
				{
					status: status,
					coupon_type: 0,
					device_type: 0,
					discount_type: 0
				},
				{},
				{
					'Authorization': `Bearer ${userStore.userInfo.token}`,
					'Content-Type': 'application/json;charset=utf-8'
				}
			);
			dataList.value = response.data.map(coupon => ({
				...coupon,
				rules: coupon.rules || [
					'1、一张订单只能使用一张优惠券',
					'2、请在有效期内使用'
				]
			}));
		} catch (error) {
			console.error('请求失败:', error);
			uni.showToast({ title: '获取优惠券失败', icon: 'none' });
		} finally {
			uni.hideLoading();
		}
	};

	const activeCouponId = ref<number | null>(null);
	const showtip = (id : number) => {
		activeCouponId.value = activeCouponId.value === id ? null : id;
	};
</script>
<style scoped>
	:deep(.wd-tabs__nav-item-text) {
		font-size: 28rpx;
	}
</style>
<style lang="scss" scoped>
	 .expired-card {
	    position: relative;
	    opacity: 0.7;
	    
	    &::after {
	      content: "";
	      position: absolute;
	      top: 0;
	      left: 0;
	      width: 100%;
	      height: 100%;
	      background-color: rgba(0, 0, 0, 0.3);
	      border-radius: 10px;
	    }
	  }
	.arrow {
		width: 10px;
		height: 6px;
		margin-left: 10rpx;
		transition: transform 0.3s ease;
	}

	.arrow.rotate {
		transform: rotate(180deg);
	}

	.content {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease-out;
		color: rgba(255, 255, 255, 1);

		p {
			font-size: 20rpx;
			margin-top: 15rpx;
			opacity: 0;
			transition: opacity 0.2s ease;
		}
	}

	.content.expanded {
		max-height: 200px;

		p {
			opacity: 1;
			transition-delay: 0.1s;
		}
	}

	.flex {
		display: flex;
		align-items: center;
		gap: 10rpx
	}

	.centerbox {
		width: 100%;
		height: 100%;

		.rechTop {
			width: 100%;
			height: 200rpx;
			background-color: black;
			position: relative;
			padding-top: constant(safe-area-inset-top);
			padding-top: env(safe-area-inset-top);
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			.imgTitele>image {
				width: 360rpx;
				height: 40rpx;
			}
			.flex {
				display: flex;
				justify-content: center;
				margin-bottom: 35rpx;
			}
		}

		.viewTab {
			margin-top: 10rpx;
			padding: 0 40rpx;

			.empty-message {
				display: flex;
				justify-content: center;
				height: 100%;
				margin-top: 50%;
			}

			.CardBox {
				width: 100%;
				margin-top: 20rpx;
				padding-bottom: 10rpx;
				border-radius: 10px;
				background: rgba(0, 0, 0, 1);
				box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

				.statusbar {
					background-color: white;
					width: fit-content;
					padding: 8rpx 15rpx;
					border-top-left-radius: 10rpx;
					font-size: 20rpx;
					color: rgba(0, 0, 0, 1);
					border-bottom-right-radius: 10rpx;
				}

				.topright {
					font-size: 20rpx;
					color: rgba(255, 255, 255, 1);
				}

				.Neirone {
					padding: 25rpx 0rpx;
					color: white;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 0 40rpx;
					border-bottom: 1px solid rgba(255, 255, 255, 0.2);
					;

					.Neirone_left {
						text {
							letter-spacing: 0px;
							font-weight: 700;
							font-size: 28rpx;
							display: block;
							margin-bottom: 20rpx;
						}

						.ulTitle {
							font-size: 20rpx;

							ul {
								margin: 0;
								padding-left: 5rpx;
								list-style-position: inside;
							}

							ul>li {
								margin-top: 14rpx;

								&:first-child {
									margin-top: 0;
								}
							}
						}
					}

					.Neirone_right {
						text-align: right;
						color: rgba(253, 244, 227, 1);

						.many {
							.sptitle {
								font-size: 60rpx;
								font-weight: 700;
							}

							span:first-child {
								font-size: 25rpx;
								font-weight: 700;
								margin-right: 10rpx;
							}
						}

						.manjian {
							font-size: 22rpx;
						}
					}
				}

				.inerratic {
					padding: 10rpx 40rpx;
					color: rgba(255, 255, 255, 1);

					p {
						font-size: 20rpx;
						margin-top: 15rpx;
					}

					.iner_top {
						width: 100%;
						display: flex;
						margin-top: 10rpx;
						justify-content: space-between;
						align-items: center;

						img {
							width: 10px;
							height: 6px;
							margin-left: 10rpx;
						}

						.custom-shadow {
							height: 44rpx;
							opacity: 1;
							background-color: black;
							color: white;
							font-size: 20rpx;
							margin-right: 0;
							border-radius: 30rpx;
							border: 1px solid rgba(255, 255, 255, 1);
						}
					}
				}
			}
		}
	}
</style>